#{$css-scope} {
  .headline,
  .title1 {
    font-size: round(2.2 * $base-font-size);
    font-weight: 100;
    letter-spacing: 1px;
  }

  .title2 {
    font-size: round(1.7 * $base-font-size);
    font-weight: 400;
  }

  .title3 {
    font-size: round(1.4 * $base-font-size);
    font-weight: 400;
  }

  .title4 {
    font-size: round(1.25 * $base-font-size);
    font-weight: 400;
  }

  .title5 {
    font-size: round(1.1 * $base-font-size);
    font-weight: 600;
  }

  .body {
    font-size: $base-font-size;
    font-weight: normal;
  }

  .caption {
    font-size: round(0.85 * $base-font-size);
    font-style: italic;
    color: rgba(80, 80, 80, 0.7);
  }

  .text-upper {
    text-transform: uppercase;
  }
  .text-lower {
    text-transform: lowercase;
  }
  .text-light {
    font-weight: normal;
  }
  .text-bold {
    font-weight: bold;
  }
  .text-italic {
    font-style: italic;
  }
  .text-nowrap {
    white-space: nowrap;
  }
}
